<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.weui.js"></script>
     <script>
         $(function(){
 $('#t1').tab({
                defaultIndex: 0,
                activeClass: 'tab-green',
                onToggle: function (index) {
console.log('index'+index);
                }
            })
             $('#tb').tab({
                 defaultIndex: 1,
                 activeClass: 'weui-bar__item_on',
                 onToggle: function (index) {
                     if(index==0){
                         $("#c"+index).html("第一个是0")
                     }else if(index==1){
                         $("#c"+index).html("第2个1")
                     }

                        console.log(index)

                 }
             })
         })

     </script>
</head>

<body ontouchstart>
    <div class="page-hd">
        <h1 class="page-hd-title">
            tabbar和navbar切换
        </h1>
        <p class="page-hd-desc">navbar切换和tabbar底部工具菜单</p>
    </div>
    <div class="weui-tab" id="t1"  style="height:auto;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">
                杨玉环
            </div>
            <div class="weui-navbar__item">
                赵飞燕
            </div>
            <div class="weui-navbar__item">
                貂蝉
            </div>
        </div>
   <div class="weui-tab__panel">
			<div id="s0" class="weui-tab__content">唐朝MM</div>
            <div id="s1" class="weui-tab__content">汉朝MM</div>
            <div  id="s2" class="weui-tab__content">三国MM</div>
  </div>
    </div>
 
    <br>
    <br>
    <div id='tb' class="weui-tab" style="height:auto;">
        <div class="weui-tab__panel">
            <div id="c0" class="weui-tab__content">这是0</div>
            <div id="c1" class="weui-tab__content">这是1</div>
            <div  id="c2" class="weui-tab__content">发现被点击了</div>
            <div id="c3"  class="weui-tab__content">点击了我</div>
        </div>

        <div class="weui-tabbar tab-bottom">
            <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                    </span>
                <p class="weui-tabbar__label">微信</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon icon-28 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">通讯录</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <i class="icon icon-29 f27 weui-tabbar__icon"></i>
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                <p class="weui-tabbar__label">发现</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item ">
                <i class="icon icon-30 f27 weui-tabbar__icon" ></i>
                <p class="weui-tabbar__label f-green">我</p>
            </a>
        </div>
    </div>



</body>
</html>
